<template>
  <view class="maintenance_choose_box">
    <!-- 列表选项 -->
    <view class="category_list">
      <view
        class="item"
        v-for="(item, index) in categoryList"
        :key="index"
        :class="{ choose: selectIndex == index }"
        @click="selectIndex = index"
      >
        {{ item.categoryMsg }}
      </view>
    </view>

    <!-- 选项内容 -->
    <scroll-view class="content" scroll-y="true">
      <view class="list">
        <view
          class="item"
          v-for="(item, index) in dataList"
          :key="index"
          @click="toDetail(item.maintenanceCategoryMsg)"
        >
          <image
            class="img"
            :src="item.maintenanceCategoryImg"
            mode="aspectFill"
          />
          <view class="msg">{{ item.maintenanceCategoryMsg }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<!-- 维修类目选择页面 -->
<script lang="ts" setup>
import { ReqSelectAllCategory } from '@/api/category'
import { ReqPutMaintenanceCategoryById } from '@/api/maintenance'
import type {
  Category,
  CategoryMaintenance
} from '@/config/data/data'
import { onLoad } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'

//数据列表
const dataList = ref<CategoryMaintenance[]>([])

//分类列表
const categoryList = ref<Category[]>([])

//当前选中列表下标
const selectIndex = ref(0)

/**
 * 跳转新增页面
 * @param item: 描述分类
 */
const toDetail = (item: string) => {
  let category = categoryList.value[selectIndex.value].categoryMsg
  uni.navigateTo({
    url: `/subpkg/maintenance/maintenance_detail?msg=${item}&category=${category}`,
  })
}

//初始化数据列表
const initData = () => {
  ReqSelectAllCategory({
    msg: 'maintenance',
  }).then((res) => {
    if (res.code == 200 && res.data) {
      categoryList.value = res.data
      getData()
    }
  })
}

//监听分类切换
watch(
  () => selectIndex.value,
  (newVlaue, oldValue) => {
    getData()
  }
)

//切换分类,获取分类类目
const getData = () => {
  ReqPutMaintenanceCategoryById({
    id: categoryList.value[selectIndex.value].categoryId,
  }).then((res) => {
    if (res.code == 200 && res.data) {
      dataList.value = res.data
    }
  })
}

//页面加载
onLoad(() => {
  initData()
})
</script>

<style scoped lang="scss">
.maintenance_choose_box {
  width: 100%;
  height: 100vh;
  display: flex;
  font-size: 30rpx;
  background-color: $uni-bg-color-grey;

  .category_list {
    width: 200rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100rpx;
      transition: all 0.2s;
    }

    .choose {
      color: rgb(251, 185, 53);
      background-color: $uni-bg-color;
    }
  }

  .content {
    width: calc(100% - 200rpx);
    height: 100vh;
    background-color: $uni-bg-color;

    .list {
      padding: 20rpx 0;
      width: 100%;
      max-height: calc(100% - 40rpx);
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      .item {
        text-align: center;
        margin-bottom: 30rpx;
        font-size: 28rpx;
        color: rgb(112, 109, 109);

        .img {
          width: 120rpx;
          height: 120rpx;
        }
      }
    }
  }
}
</style>
